﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Combo - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="jquery.jdirk.js"></script>
    <script src="jeasyui.extensions.datagrid.fixed.cellMerge.js"></script>

    <script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150, editor: "text" });
            c1.push({ field: 'Sex1', title: '男', width: 90, editor: "text" });
            c1.push({ field: 'Sex2', title: '女', width: 90, editor: "text" });

            result.push(c1);

            return result;
        };
        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60, editor: "text" },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal);

            return result;
        };
        var editingIndex = -1;
        var options = {
            idField: "ID",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    text: "合并", iconCls: "icon-add", handler: function () {
                        $("#dg").datagrid('mergeCells', {
                            index: 5,
                            type: "body",
                            field: "TS1",
                            rowspan: 2
                        });
                    }
                },
                {
                    text: "结束编辑", iconCls: "icon-ok", handler: function () {
                        $("#dg").datagrid("endEdit", editingIndex);
                        editingIndex = -1;
                    }
                },
                {
                    text: "获取编辑前的数据", iconCls: "icon-search", handler: function () {
                        var rows = $("#dg").datagrid("getRows");
                        var the = $.array.filter(rows, function (item) { return item.ID == 6 || item.ID == 7 });
                        console.log(rows);
                        alert(JSON.stringify(the));
                    }
                },
                {
                    text: "获取编辑后的数据", iconCls: "icon-search", handler: function () {
                        var rows = $("#dg").datagrid("getRows");
                        var the = $.array.filter(rows, function (item) { return item.ID == 6 || item.ID == 7 });
                        console.log(rows);
                        alert(JSON.stringify(the));
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "datagrid-common-data.json",
            onDblClickRow: function (rowIndex, rowData) {
                if (editingIndex == -1) {
                    $("#dg").datagrid("beginEdit", rowIndex);
                    editingIndex = rowIndex;
                } else {
                    alert("请先结束正在编辑的行");
                }
            },
            rowStyler: function (index, row) {
                if (row.ID == 6 || row.ID == 7) {
                    return 'background-color:#6293BB;color:#fff;';
                }
            }
        };

        $("#dg").datagrid(options);
    });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',title:'西部',border:false,split:true" style="width:260px;border-right-width:1px;">
        </div>
        <div data-options="region:'center',title:'中部',border:false" style="border-left-width:1px;">
            <table id="dg"></table>
        </div>
    </div>
</body>
</html>
